<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--
vue3组件 每个vue组件都是一个独立的vue实例,具有自己的模版,数据,方法和生命周期钩子,使得组件可以自含地定义和管理自己的功能和样式
组件 component 是 vue.js最强大的功能之一
组件可以扩展 HTML 元素 封装可重用的代码 可以帮助你将用户 界面拆分成独立和可复用的部分
每个 vue组件都是一个独立的 vue实例 ,具有自己的模板,数据 方法和生命周期钩子 使得组件可以自包含地定义和管理自己的功能和样式

vue 组件的特性和优势
复用性 组件可以在不同的地方多次使用,提高代码的复用性和可维护性
封装性 每个组件都是独立的作用域,可以封装自己的状态和逻辑,避免全局污染
组合性 可以通过组合多个小组件构建复杂的界面
响应式 组件的数据响应式地绑定到视图,数据更新时自动更新视图
模块化 支持模块化开发,可以使现代前端工具链进行构建和管理
组件 系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树

每个 vue应用都是通过用 createApp 函数 创建的,传递给 createApp 的选项用于配置根组件. 当我们挂载应用时,该组件被用作渲染的起点
一个应用 需要被挂载到一个 DOM 元素中
将 vue应用挂载到 <div id="app"></div>,应该传入 #app
const RootComponent = {/* 选项 */}
const app = createApp(RootComponent)
const vm = app.mount('#app')

注册一个全局组件语法格式如下:
const app = Vue.createApp({...})
app.component('my-component-name', {/* 选项 */})

my-component-name 为组件名 /*...*/ 部分为配置选项. 注册后,我们可以使用以下方式来调用组件 :
<my-component-name></my-component-name>

vue3 组件示例 : 计数器组件
创建一个简单的计数器组件,它包含了一个按钮,和一个显示计数的文本.当点击按钮时,计数器的值会增加
1.安装 vue3  通过npm或yarn 来安装 Vue cli
npm install -g @vue/cli
或者
yarn global add @vue/cli
创建一个新的vue 项目
vue create counter-app
cd counter-app

2.创建组件 在src 目录下创建一个 Greeting.vue 文件,内容如下:
 <template>
  <div class="greeting">
    <h1>Hello, {{ name }}!</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

<script setup lang="ts">import { ref } from 'vue';

// 定义组件接收的属性
const props = defineProps({
  name: {
    type: String,
    required: true
  }
});

// 定义组件的方法
const sayHello = () => {
  alert(`Hello, ${props.name}!`);
};
</script>

<style scoped>.greeting {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

button {
  margin-top: 1rem;
}
</style>


3.注册组件 局部注册 在App.vue 中注册组件






-->
<body>

</body>
</html>
